<template>
	<view class="my-leave">
		<view class="content">
			<u--form :model="form" :rules="rules" ref="uForm1" :errorType="errorType" labelPosition="top">
				<u-form-item label="姓名:" prop="name" label-width="120">
					<u--input
					    placeholder="请输入姓名"
					    border="surround"
						v-model="form.name"
					  ></u--input>
				</u-form-item>
				<u-form-item label="电话:" prop="mobile" label-width="120">
					<u--input
					    placeholder="请输入电话"
					    border="surround"
						v-model="form.mobile"
					  ></u--input>
				</u-form-item>
				<u-form-item label="留言:" label-width="120">
					<u--textarea v-model="form.text" placeholder="请输入留言" height="140" confirmType="search"></u--textarea>
				</u-form-item>
			</u--form>
		</view>
		<view class="footer">
			<u-button type="primary" shape="circle" text="确定" @click="submit"></u-button>
		</view>
	</view>
</template>

<script>
	import Util from '@/utils/util';
	import Alert from '@/utils/alert';
	import Api from '@/utils/api';
	import Rest from '@/utils/rest';
	
	export default {
		data() {
			return {
				form: {
					name: '',
					mobile: '',
					text: ''
				},
				errorType: 'message',
				rules: {
					mobile: [
						{
							required: true,
							message: '请输入手机号码',
							// 可以单个或者同时写两个触发验证方式
							trigger: ['change', 'blur']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur']
						}
					],
					name: [
						{
							required: true,
							message: '请输入姓名',
							trigger: ['change', 'blur']
						}
					]
				},
				border: 1
			};
		},
		methods: {
			submit() {
				this.$refs.uForm1.validate().then(res => {
					
					Rest.post(Api.ZHUIGE_Index_Form, this.form).then(res => {
						this.$u.toast(res.msg);
					}, err => {
						console.log(err)
					});
					
					
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
		}
	}
</script>

<style lang="scss">
	.my-leave {
		padding: 32rpx 48rpx;
		.footer {
			position: fixed;
			width: calc(100% - 96rpx);
			bottom: 80rpx;
		}
	}
</style>
